<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <base href="http://121.4.123.8:8081/ssm/">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.5/css/layui.css"
          integrity="sha512-VArBImUmeDL55k4hX2fAfLOuMLsojCjRL9nRsgWvaaG9YHwoWeUFG+gz5c6AaMV7u7b9Ij860ttXWquwXVgIkw=="
          crossorigin="anonymous"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.5/layui.js"
            integrity="sha512-7Q0XjSdqBRpX+93+4bo1O6aOYIWDcUVbnr6h9SgUMNnsTmdTGARl8e6jn1rjMcNrzJXvYTkquoR0A10W5LKvRA=="
            crossorigin="anonymous"></script>
    <style>
        .question {
            text-align: right;
            line-height: 38px;
        }

        .isTrue {
            border: 1px solid green;
        }

        .isFalse {
            border: 1px solid red;
        }
        .isTrue2 {
            color: #0ae60a
        }

        .isFalse2 {
            color: red;
        }
    </style>
</head>
<body>
<div class="layui-tab layui-tab-card" lay-filter="test1">
    <ul class="layui-tab-title">
        <li class="layui-this" lay-id="1">一、单词译中</li>
        <li lay-id="2">二、单词译英</li>
        <li lay-id="3">三、短语译中</li>
        <li lay-id="4">四、短语译英</li>
        <li lay-id="5">五、缩略词</li>
        <li lay-id="6">六、英语猜词</li>
        <li lay-id="7">七、句子译中</li>
        <li lay-id="8">八、句子译英</li>
        <li lay-id="9">九、填空</li>
        <li lay-id="10">十、选择题</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <h2>一、写出以下单词的中文意思（每小题0.5分，共10分）</h2>
            <div id="q1">
                <div id="q1_view" class="layui-row layui-col-space10"></div>
                <div class="button_view"></div>
                <hr/>
                <form method="post" >

                    <textarea id="desc" name="desc" placeholder="意见反馈" class="layui-textarea"></textarea>

                    <button id="doFeedback" class="layui-btn" type="submit">立即提交</button>
                </form>
            </div>
        </div>
        <div class="layui-tab-item">
            <h2>二、根据给出的中文意思，写出单词（每小题0.5分，共10分）</h2>
            <div id="q2">
                <div id="q2_view" class="layui-row layui-col-space10"></div>
                <div class="button_view"></div>
            </div>
        </div>
        <div class="layui-tab-item">
            <h2>三、根据给出的短语，写出中文意思（每小题1分，共10分）</h2>
            <div id="q3">
                <!--数据渲染在这里-->
                <div id="q3_view" class="layui-row layui-col-space10"></div>
                <div class="button_view"></div>
            </div>
        </div>
        <div class="layui-tab-item">
            <h2>四、根据给出的中文意思，写出短语（每小题1分，共10分）</h2>
            <div id="q4">
                <div id="q4_view" class="layui-row layui-col-space10"></div>
                <div class="button_view"></div>
            </div>
        </div>
        <div class="layui-tab-item">
            <h2>五、写出以下缩略语的完整形式和中文意思（每小题1分，共10分）</h2>
            <div id="q5">

                <div id="q5_view" class="layui-row layui-col-space10">
                    <div class="head_view"></div>
                </div>
                <div class="button_view"></div>
            </div>
        </div>
        <div class="layui-tab-item">
            <h2>六、根据后面的英文解释，填写适当的英语（每小题1分，共5分）</h2>
            <div id="q6">
                <table class="layui-table">
                    <colgroup>
                        <col width="100">
                        <col>
                    </colgroup>
                    <thead>
                    </thead>
                    <tbody id="q6_view">

                    </tbody>
                </table>

                <div class="button_view"></div>
            </div>
        </div>
        <div class="layui-tab-item">
            <h2>七、把以下句子翻译为中文（每小题2分，共20分）</h2>
            <div id="q7">
                <table class="layui-table">
                    <colgroup>
                        <col>
                    </colgroup>
                    <thead>
                    </thead>
                    <tbody id="q7_view">

                    </tbody>
                </table>

                <div class="button_view"></div>
            </div>
        </div>
        <div class="layui-tab-item">
            <h2>八、把以下句子翻译为英文</h2>
            <div id="q8">
                <table class="layui-table">
                    <colgroup>
                        <col>
                    </colgroup>
                    <thead>
                    </thead>
                    <tbody id="q8_view">

                    </tbody>
                </table>

                <div class="button_view"></div>
            </div>
        </div>
        <div class="layui-tab-item">
            <h2>九.从供选择的答案中选出应填入下面一段英文中__n__内的正确答案，把编号写在答卷的对应栏内。</h2>
            <div id="q9">
                <table class="layui-table">
                    <colgroup>
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th style="line-height: 25px;">A brouter is a network bridge and a router
                            combined in a single
                            product. A
                            bridge is a
                            device that connects one local area network (LAN) to __A__ local area network that uses the
                            same protocol (for example, __B__ or Token Ring). If a data unit on one LAN is intended for
                            a __C__ on an interconnected LAN, the bridge forwards the data unit to that LAN; otherwise,
                            it passes it along on the same __D__. A bridge usually offers only one path to a given
                            interconnected LAN. A router connects a network to one or more other __E__ that are usually
                            part of a wide area network (WAN) and may __F__ a number of paths out to destinations on
                            those networks. A router therefore needs to have __G__ information than a bridge about the
                            interconnected networks. It __H__ a routing table for this information. Since a given
                            outgoing data unit or packet from a computer may be intended for an __I__ on the local
                            network, on an interconnected LAN, or the wide area network, it makes sense to have a single
                            unit that __J__ all data units and forwards them appropriately.
                        </th>

                    </tr>

                    </thead>
                    <tbody id="q9_view">
                    </tbody>
                </table>

                <div class="button_view"></div>
            </div>
        </div>
        <div class="layui-tab-item">
            <h2>十、选择题（每小题1分，共20分）</h2>
            <div id="q10">
                <table class="layui-table"  lay-skin="nob">
                    <colgroup>
                        <col>
                    </colgroup>
                    <thead>

                    </thead>
                    <tbody id="q10_view">
                    </tbody>
                </table>


            </div>
        </div>
    </div>


</div>


</body>
<script id="button_template" type="text/html">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 question"></div>
        <div class="layui-col-xs8 layui-col-sm8 layui-col-md8 question">
            <button onclick="showAnswer({{d.type}})" type="button"
                    class="layui-btn layui-btn-radius  layui-btn-sm ">
                参考答案
            </button>
            <button type="button" onclick="clearAnswer()"
                    class="layui-btn layui-btn-radius layui-btn-primary  layui-btn-sm ">清空
            </button>
            <button type="button" onclick="compareAnswer({{d.type}})"
                    class="layui-btn layui-btn-radius layui-btn-primary layui-btn-normal layui-btn-sm ">比较答案
            </button>
        </div>
        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 question"></div>
    </div>
</script>
<script id="q1_template" type="text/html">
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 question">
        {{d.question}}
    </div>
    <div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
        <input type="text" required lay-verify="required" id="q1_{{d.id}}" autocomplete="off"
               class="layui-input q_answer">
    </div>
</script>
<script id="q2_template" type="text/html">
    <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 question">
        {{d.question}}
    </div>
    <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
        <input type="text" required lay-verify="required" id="q2_{{d.id}}" autocomplete="off"
               class="layui-input q_answer ">
    </div>
</script>
<script id="q3_template" type="text/html">
    <div class="layui-col-xs5 layui-col-sm5 layui-col-md5 question">
        {{d.question}}
    </div>
    <div class="layui-col-xs5 layui-col-sm5 layui-col-md5">
        <input type="text" required lay-verify="required" id="q3_{{d.id}}" autocomplete="off"
               class="layui-input q_answer ">
    </div>
</script>
<script id="q4_template" type="text/html">
    <div class="layui-col-xs5 layui-col-sm5 layui-col-md5 question">
        {{d.question}}
    </div>
    <div class="layui-col-xs5 layui-col-sm5 layui-col-md5">
        <input type="text" required lay-verify="required" id="q4_{{d.id}}" autocomplete="off"
               class="layui-input q_answer ">
    </div>
</script>
<script id="q5_template" type="text/html">
    <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 question">
        {{d.question}}
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
        <input type="text" required lay-verify="required" placeholder="{{# if(d.index==0){}}完整形式{{#}}}"
               id="q5_{{d.id}}"
               autocomplete="off"
               class="layui-input q_answer ">
    </div>
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
        <input type="text" required lay-verify="required" placeholder="{{# if(d.index==0){}}中文意思{{#}}}"
               id="q5_{{d.id}}_reserveStr1"
               autocomplete="off"
               class="layui-input q_answer ">
    </div>
</script>
<script id="q5_head_template" type="text/html">
    <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 question">
        缩略语
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
        完整形式
    </div>
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
        中文意思
    </div>
</script>
<script id="q6_template" type="text/html">
    <tr>

        <td><input type="text" required lay-verify="required" id="q6_{{d.id}}" autocomplete="off"
                   class="layui-input q_answer "></td>
        <td>{{d.question}}</td>
    </tr>
</script>
<script id="q7_template" type="text/html">
    <tr>
        <td>{{d.index+1}}、{{d.question}}</td>
    </tr>
    <tr>

        <td>
            <textarea placeholder="{{d.index+1}}" id="q7_{{d.id}}" class="layui-textarea q_answer"></textarea>
        </td>
    </tr>
</script>
<script id="q8_template" type="text/html">
    <tr>
        <td>{{d.index+1}}、{{d.question}}</td>
    </tr>
    <tr>

        <td>
            <textarea placeholder="{{d.index+1}}" id="q8_{{d.id}}" class="layui-textarea q_answer"></textarea>
        </td>
    </tr>
</script>
<script id="q9_template" type="text/html">


    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 question">
        <input style="padding-left: 1.5rem" type="text" required placeholder="{{d.index+1}}"
               lay-verify="required"
               id="q9_{{d.id}}"
               autocomplete="off"
               class="layui-input q_answer ">
    </div>


</script>
<script id="q10_template" type="text/html">
    <tr>
        <td>{{d.index+1}}、{{d.question}}</td>
    </tr>

    <tr>
        <td>
        {{# var temp=['A','B','C','D']; for(var i=0 ; i<4 ; i++){ }}
            <input type="radio" name="anwers_{{d.id}}" id="radio_{{d.id}}_{{i}}"
                   onclick="compareChoiceQuestionAnswer(this,{{d.anwers[i].anwersKey}},{{d.trueAnwersKey}},'anwers_{{d.id}}')" ><label class="anwers_{{d.id}}"
                for="radio_{{d.id}}_{{i}}">&nbsp;{{
            temp[i]}}.{{d.anwers[i].anwersValue}}&nbsp;&nbsp;</label>
        {{# }  }}
        </td>
    </tr>
    <tr style="background-color: #fafafa">
        <td>
        </td>
    </tr>
</script>
<script>
    $(function () {
        getData(1)

        //监听Tab切换，以改变地址hash值
        element.on('tab(test1)', function () {
            let index = this.getAttribute('lay-id');
            console.log(index)
            getData(index)
        });

    })
    let laytpl = layui.laytpl;
    let element = layui.element;
    let list = {};

    function getData(type) {
        let lis = [];
        $.ajax({
            url: "q" + type,
            datatype: "json",
            type: "post",
            data: {type: type},
            success: function (data) {
                list = {};
                list = data;
                console.log(list)
                //渲染题目
                layui.each(data, function (index, item) {
                    item.index = index;
                    laytpl($("#q" + type + "_template").html()).render(item, function (html) {
                        lis.push(html);
                    });
                });
                //渲染按钮
                laytpl($("#button_template").html()).render({"type": type}, function (html) {
                    $(".button_view").html(html);
                });

                $("#q" + type + "_view").html(lis.join(''));

            }
        })
    }


    function showAnswer(type) {
        console.log(list)
        removeMyClass()
        layui.each(list, function (index, item) {
            $("#q" + type + "_" + item.id).val(item.answer);
            if (type == 5) {
                // id="q5_{{d.id}}_reserveStr1"
                $("#q" + type + "_" + item.id + "_reserveStr1").val(item.reserveStr1);
            }
        })
    }
    $("#doFeedback").on("click",function () {
        let desc=$("#desc").val();
        if(desc==""||desc.length==0){
            alert("请输入");
            return false;
        }
        $('#doFeedback').attr("disabled", "disabled");
        $.ajax({
            url: "doFeedback" ,
            datatype: "json",
            type: "post",
            data: {desc: desc},
            success: function (data) {
                if(data==200){
                    $("#desc").val("");
                    alert("反馈成功，请勿重复提交")
                }
            }
        })
    })
    function clearAnswer() {
        $(".q_answer").val("");
        removeMyClass()
    }

    function removeMyClass() {
        $(".q_answer").removeClass("isTrue");
        $(".q_answer").removeClass("isFalse");
    }

    function compareAnswer(type) {
        removeMyClass();
        let myanswer = "";
        let dom;
        layui.each(list, function (index, item) {
            dom = $("#q" + type + "_" + item.id);
            myanswer = dom.val();
            if (item.answer.toLowerCase() == $.trim(myanswer).toLowerCase()) {
                dom.toggleClass("isTrue");
            } else {
                dom.toggleClass("isFalse");

            }
        })
        if (type == 5) {
            let myanswer2 = "";
            let dom2;
            layui.each(list, function (index, item) {
                dom2 = $("#q" + type + "_" + item.id + "_reserveStr1");
                myanswer2 = dom2.val();
                if (item.reserveStr1.toLowerCase() == $.trim(myanswer2).toLowerCase()) {
                    dom2.toggleClass("isTrue");
                } else {
                    dom2.toggleClass("isFalse");

                }
            })
        }
    }

    function compareChoiceQuestionAnswer(t,myAnwers,trueAnwers,names) {

        let ts= $(t).next();
        $("."+names).removeClass("isTrue2")
        $("."+names).removeClass("isFalse2")
        ts.removeClass("isTrue2")
        ts.removeClass("isFalse2")
        if(myAnwers==trueAnwers){
            ts.toggleClass("isTrue2")
        }else{
            ts.toggleClass("isFalse2");

        }

    }
</script>
</html>